<template>
  <div class='container'>
    <el-dialog
  :title="pageflag"
  :visible="showDialog"
  @close='closeDialog'
  @open='openDialog'
  width="30%">
    <el-form :model="form" :rules="rules" ref="dialogForm">
      <el-form-item label="所属学科" :label-width="formLabelWidth" prop="subjectName" v-if="!this.$route.query.name">
      <el-select v-model="form.subjectName" placeholder="请选择" @focus="getSubList">
        <el-option :label="item.label" :value="item.value" v-for="item in Subdata" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目录名称" :label-width="formLabelWidth" prop="catalogName">
      <el-input v-model="form.catalogName" placeholder="请输入目录名称"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="addCatlogBtn">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/directorys'
export default {
  name: 'addDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: true
    },
    pageflag: {
      type: String,
      required: true
    },
    directorysid: {
      type: Number,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      form: {
        subjectName: '',
        subjectID: '',
        catalogName: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        catalogName: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      formLabelWidth: '80px',
      Subdata: {}
    }
  },
  methods: {
    closeDialog () {
      this.$emit('closeDialog')
      this.$refs.dialogForm.resetFields()
      this.form.subjectName = ''
      this.form.catalogName = ''
    },
    async getSubList () {
      const { data } = await simple()
      this.Subdata = data
    },
    addCatlogBtn () {
      this.$refs.dialogForm.validate(async flag => {
        if (!flag) {
          this.$message.error('数据有问题，请重新填写')
        } else {
          if (this.pageflag === '新增目录') {
            if (this.$route.query.name) {
              await add({
                subjectID: +this.$route.query.id,
                directoryName: this.form.catalogName
              })
            } else {
              await add({
                subjectID: +this.form.subjectName,
                directoryName: this.form.catalogName
              })
            }
          } else {
            if (this.$route.query.name) {
              await update({
                id: this.directorysid,
                subjectID: +this.$route.query.id,
                directoryName: this.form.catalogName
              })
            } else {
              await update({
                id: this.directorysid,
                subjectID: +this.form.subjectID,
                directoryName: this.form.catalogName
              })
            }
          }
          this.$message.success(`${this.pageflag}成功`)
          this.closeDialog()
        }
        this.$emit('updataList')
      })
    },
    openDialog () {
      if (this.pageflag === '修改目录') {
        // console.log(this.tableData)
        const o = this.tableData.find(item => item.id === this.directorysid)
        this.form.subjectName = o.subjectName
        this.form.catalogName = o.directoryName
        this.form.subjectID = o.subjectID
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep{
  .el-input__inner{
    width: 300px !important;
  }
}
.dialog-footer{
  margin-left: 200px;
}
</style>
